<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>兑换规则</title>
</head>
<body>
<div>
	<div class="dialog" style="display:none">
		<div class="content">
			<div class="horizontalFlex alignItemCenter spaceBetween">
				<div class="closeBtn">
				</div>
				<div style="font-weight: bold;">
					兑换规则
				</div>

				<div onclick="nones()">
					<img class="closeBtn" src="./asset/close.png">
				</div>

			</div>
			<div style="margin:calc(40rem/28)">
				这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！这里是兑换规则！
			</div>
		</div>


	</div>
	<div onclick="shows()">兑换规则</div>
</div>
<script type="text/javascript" src="../../js/jquery.js" ></script>
<script>
	// 用720位基准开发的
	var baseWith = 720;
	var baseFontSize = 28;
	(function (doc, win) {
		var docEl = doc.documentElement;
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			var clientHeight = docEl.clientHeight;
			if (!clientWidth||!clientHeight) return;
			// 判断是横屏还是竖屏
			var max = (clientWidth<clientHeight)?clientWidth:clientHeight
			docEl.style.fontSize = baseFontSize * (max / baseWith) + 'px';
		};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	}(document,window));
	//显示遮罩弹窗
	function shows(){
		$(".dialog").css("display","block");
	}
	//隐藏遮罩弹窗
	function nones(){
		$(".dialog").css("display","none");
	}
</script>
</body>

</html>
